import React from 'react'
import Component, { mapStateToProps, mapDispatchToProps } from '@components/Component'
import { connect } from 'react-redux'
import PropTypes from 'prop-types'
import _ from 'loadsh'
import { Form, Input, message } from 'antd'
import { Line, Cell, Split } from '@components/ApprovePre/Approve'
import SelectSecretary from '../SelectSecretary'
import style from '../RegisterCase.module.less'

const { Item } = Form

class BusinessLeaderInput extends Component {
  state = {
    secretarySelectorVisible: false,
    secretaryid: '',
    secretarySelectorTutorVisible: false,
    secretaryidTutor: '',
    list: [],
    keyTitleMap: {}
  }

  getList () {
    this.$get('/api/xapc/employeecase', {
      caseid: this.props.caseDetail.id,
      causeaction: 1,
      party: 1
    }).then(res => {
      if (res.status === 1) {
        this.setState({
          list: res.data
        }, () => {
          const c = this.props.formRef.current
          const id = c.getFieldValue(['vars', 'processerid'])
          this.setState({ secretaryid: id ? String(id) : id })
        })
      } else {
        message.warning(res.message)
      }
    }).catch(() => { })
  }

  initKeyTitleMap () {
    const map = {}
    const list = _.get(this.props.instance || {}, 'currentStep.vars', [])
    list.forEach(li => {
      map[li.key] = li.title
    })
    this.setState({
      keyTitleMap: map
    })
  }

  componentDidUpdate (prev) {
    if (this.props.instance !== prev.instance) {
      this.initKeyTitleMap()
    }
  }

  componentDidMount () {
    this.initKeyTitleMap()
  }

  componentWillMount () {
    this.getList()
  }

  renderData () {
    const { secretaryid, list } = this.state
    let obj = null
    for (let i = 0; i < list.length; i++) {
      if (list[i].employeeid === secretaryid) {
        obj = list[i]
        break
      }
    }
    if (!obj) {
      return false
    }
    return (<span className={style['secretary-line']}>（今年分配{obj.caseon}，在办案件{obj.caseing}，类案数{obj.caselike}）</span>)
  }

  // 选择指定秘书
  setSecretary (o) {
    const { employee, employeeid } = o
    this.props.formRef.current.setFieldsValue({
      secretary: employee,
      vars: {
        processer: employee,
        processerid: employeeid
      }
    })
    this.setState({
      secretaryid: employeeid
    })
  }

  // 选择指导秘书
  setSecretaryTutor (o) {
    const { employee, employeeid } = o
    this.props.formRef.current.setFieldsValue({
      secretaryTutor: employee,
      vars: {
        processer_tutor: employee,
        processerid_tutor: employeeid
      }
    })
    this.setState({
      secretaryidTutor: employeeid
    })
  }

  render () {
    const { id } = this.props.caseDetail
    const { secretarySelectorVisible, secretaryid, secretarySelectorTutorVisible, secretaryidTutor } = this.state
    return (
      <div>
        <SelectSecretary caseid={id} visible={secretarySelectorVisible} value={secretaryid} hide={() => this.setState({ secretarySelectorVisible: false })} changeSecretary={o => this.setSecretary(o)} />
        <SelectSecretary caseid={id} visible={secretarySelectorTutorVisible} value={secretaryidTutor} hide={() => this.setState({ secretarySelectorTutorVisible: false })} changeSecretary={o => this.setSecretaryTutor(o)} />
        <Line>
          <Cell>
            <Item label='操作者'>
              <span>{this.props.userInfo.realname}</span>
            </Item>
          </Cell>
          <Split />
          <Cell>
            <Item name='secretary' label='指定秘书' rules={[{ required: true, message: '指定秘书不能为空' }]}>
              <Input placeholder='请选择秘书' readOnly onClick={() => this.setState({ secretarySelectorVisible: true })} />
            </Item>
          </Cell>
          <Cell>
            {this.renderData()}
          </Cell>
        </Line>
        <Line>
          <Cell>
            <Item name='secretaryTutor' label='指导秘书'>
              <Input placeholder='请选择秘书' readOnly onClick={() => this.setState({ secretarySelectorTutorVisible: true })} />
            </Item>
          </Cell>
        </Line>
      </div>
    )
  }
}

BusinessLeaderInput.proptypes = {
  caseDetail: PropTypes.object,
  userInfo: PropTypes.object,
  instance: PropTypes.object,
  formRef: PropTypes.object
}

BusinessLeaderInput.defaultProps = {
  caseDetail: {},
  userInfo: {},
  instance: {},
  formRef: {}
}

const mapState = mapStateToProps(function (state) {
  return {
    userInfo: state.basic.userInfo
  }
})

const mapDispatch = mapDispatchToProps(function (dispatch) {
  return {

  }
})

export default connect(mapState, mapDispatch)(BusinessLeaderInput)
